apps/web/app/meetings/page.tsx (1)

4-4: 성능 최적화 제안

MeetingRoomSchedule 컴포넌트가 복잡한 데이터 fetching과 상태 관리를 포함하고 있을 것으로 예상됩니다. 필요한 경우 다음 최적화를 고려해보세요:

1. React.memo를 사용한 불필요한 리렌더링 방지
2. 데이터 fetching을 위한 suspense 경계 설정
3. 에러 바운더리 구현

apps/web/app/utils/formatDate.ts (1)

1-3: 기본 구현이 깔끔하고 명확합니다.

날짜 형식이 ISO 8601 표준을 따르고 있으며, padStart를 사용한 구현이 적절합니다.

입력값 유효성 검사 추가 권장

날짜 값의 유효성을 검증하는 로직이 필요합니다:

• 월: 1-12
• 일: 1-31 (월별로 다름)
• 연도: 적절한 범위 설정

다음과 같은 개선된 구현을 제안드립니다:

+function isValidDate(date: { year: number; month: number; day: number }): boolean {
+  const { year, month, day } = date;
+  const d = new Date(year, month - 1, day);
+  return d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day;
+}
+
 export function formatDate(date: { year: number; month: number; day: number }): string {
+  if (!date?.year || !date?.month || !date?.day) {
+    throw new Error('날짜 정보가 올바르지 않습니다.');
+  }
+  if (!isValidDate(date)) {
+    throw new Error('유효하지 않은 날짜입니다.');
+  }
   return `${String(date.year)}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
 }

타입 정의 개선 제안

더 구체적인 타입 제한을 위해 다음과 같은 타입 정의를 고려해보세요:

type DateInput = {
  year: number;
  month: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  day: number;
};

apps/web/app/utils/timeToMinutes.ts (1)

3-7: JSDoc 문서를 개선해주세요.

현재 문서에 다음과 같은 중요한 정보들이 누락되어 있습니다:

• 입력값이 문자열일 경우 예상되는 ISO 형식
• 반환되는 시간이 자정(00:00) 기준 총 경과 분임을 명시
• 예제 코드

다음과 같이 개선하는 것을 제안합니다:

 /**
  * 주어진 시간(Date 객체 또는 ISO 문자열)을 분 단위로 변환합니다.
  * @param time Date 객체 또는 ISO 문자열
  * @returns 분 단위의 숫자
+ * @example
+ * timeToMinutes(new Date('2024-01-01T14:30:00')) // 870 (14시 30분 = 14 * 60 + 30)
+ * timeToMinutes('2024-01-01T09:15:00') // 555 (9시 15분 = 9 * 60 + 15)
  */

apps/web/app/meetings/_components/Reservation/ReservationForm/DeleteButton.tsx (2)

5-11: 컴포넌트 구현이 깔끔하고 타입이 잘 정의되어 있습니다.

컴포넌트가 간단하고 목적에 맞게 잘 구현되어 있습니다. 하지만 접근성 향상을 위해 몇 가지 개선사항을 제안드립니다.

다음과 같이 접근성 속성을 추가하는 것을 고려해보세요:

 <Button 
   variant="Primary" 
   className="mt-20 h-48 w-full" 
   onClick={onDelete}
+  aria-label="예약 삭제"
+  role="button"
 >
   {BUTTON_TEXT.delete}
 </Button>

---

7-7: 스타일링 관련 제안

현재 하드코딩된 높이와 마진 값을 theme 시스템이나 공통 스타일 상수로 분리하는 것을 고려해보세요.

apps/web/app/meetings/_components/Schedule/ScheduleRow/CurrentTimeLabel.tsx (1)

6-16: 하드코딩된 마진값 개선이 필요합니다.

현재 구현은 대체로 잘 되어있지만, 몇 가지 개선사항을 제안드립니다:

1. -ml-16와 같은 하드코딩된 마진값은 유지보수를 어렵게 만들 수 있습니다.
2. 시간 레이블의 위치 조정이 화면 크기에 따라 더 유동적으로 대응할 필요가 있습니다.

다음과 같이 개선해보시는 것은 어떨까요?:

-      className="text-xs-semibold text-custom-black absolute -bottom-24 z-30 -ml-16 rounded bg-none md:-bottom-20 md:block"
+      className="text-xs-semibold text-custom-black absolute -bottom-24 z-30 transform -translate-x-1/2 rounded bg-none md:-bottom-20 md:block"

이렇게 하면:

• transform과 translate를 사용하여 더 유연한 중앙 정렬이 가능합니다
• 반응형 레이아웃에서도 일관된 동작을 기대할 수 있습니다

apps/web/app/meetings/_components/skeleton/RoomNameSkeleton.tsx (1)

7-7: Tailwind 클래스 구조화 제안

현재 긴 className 문자열이 가독성을 저하시킵니다.

다음과 같이 클래스를 논리적 그룹으로 분리하는 것을 제안드립니다:

-    <div className="transition-linear md:min-w-128 rounded-8 border-1 text-lg-medium ml-16 inline-block h-48 min-w-80 animate-pulse gap-8 border-gray-200/10 bg-white p-12 text-center md:h-60 md:px-32 md:py-16">
+    <div className={`
+      // Layout
+      inline-block min-w-80 h-48 ml-16 gap-8
+      // Typography
+      text-lg-medium text-center
+      // Appearance
+      rounded-8 border-1 border-gray-200/10 bg-white
+      // Spacing
+      p-12
+      // Animation
+      transition-linear animate-pulse
+      // Responsive
+      md:min-w-128 md:h-60 md:px-32 md:py-16
+    `}>

apps/web/app/meetings/_components/skeleton/TimeTextSkeleton.tsx (1)

8-12: 성능 최적화를 위한 제안

현재 24개의 엘리먼트를 생성하는 방식은 다음과 같이 개선될 수 있습니다:

• useMemo를 사용하여 배열 생성 최적화
• 반복되는 스타일을 별도의 클래스로 추출

+const HOURS_IN_DAY = 24;
+const skeletonBaseClass = "min-w-144 -ml-40 mt-6 flex animate-pulse items-center justify-center";
+
 function TimeTextSkeleton(): JSX.Element {
+  const hours = useMemo(() => Array.from({ length: HOURS_IN_DAY }), []);
   return (
     <div className="flex w-full">
-      {Array.from({ length: 24 }, (_, index) => (
+      {hours.map((_, index) => (
-        <div key={`skeleton-${index}`} className="min-w-144 -ml-40 mt-6 flex animate-pulse items-center justify-center">
+        <div key={`skeleton-${index}`} className={skeletonBaseClass}>
           <div className="h-12 w-40 rounded bg-gray-400" />
         </div>
       ))}

apps/web/app/meetings/_components/Schedule/RoomName.tsx (1)

13-13: className을 더 간단하게 정리해보세요

현재 className이 너무 길어 가독성이 떨어집니다. Tailwind의 @apply 디렉티브를 사용하여 스타일을 분리하는 것을 추천드립니다.

다음과 같이 변경해보세요:

-    <div className="transition-linear md:min-w-128 rounded-8 border-1 text-custom-black/80 text-lg-medium hover:bg-custom-black/90 inline-block h-48 min-w-80 gap-8 border-gray-200/10 bg-white p-12 text-center hover:text-white/90 md:h-60 md:px-32 md:py-16">
+    <div className="room-name-container">

그리고 별도의 CSS 파일에 다음을 추가하세요:

.room-name-container {
  @apply transition-linear md:min-w-128 rounded-8 border-1 text-custom-black/80;
  @apply text-lg-medium hover:bg-custom-black/90 inline-block h-48 min-w-80;
  @apply gap-8 border-gray-200/10 bg-white p-12 text-center;
  @apply hover:text-white/90 md:h-60 md:px-32 md:py-16;
}

apps/web/api/users.ts (1)

16-25: 함수 명명 규칙 개선이 필요합니다

getAllUser는 복수형 데이터를 반환하므로 getAllUsers로 변경하는 것이 더 명확할 것 같습니다.

다음과 같이 수정을 제안드립니다:

-export const getAllUser = async (): Promise<IUser[]> => {
+export const getAllUsers = async (): Promise<IUser[]> => {

apps/web/app/types/scheduletypes.ts (1)

22-22: 타입 안전성이 개선되었습니다!

string 타입에서 SelectedRoom | null로 변경함으로써 타입 안전성이 향상되었습니다. 다만, 주석은 인터페이스 정의만으로도 충분히 이해할 수 있으므로 제거하는 것이 좋을 것 같습니다.

-  selectedRoom: SelectedRoom | null; // name과 _id를 포함
+  selectedRoom: SelectedRoom | null;

apps/web/app/meetings/_components/Schedule/ScheduleRow/ScheduleTooltip.tsx (1)

10-10: children prop 사용이 올바르게 구현되었습니다.

props 구조 분해와 children 렌더링이 React의 관행에 맞게 잘 구현되었습니다. 하지만 children이 없을 때의 처리를 고려해볼 필요가 있습니다.

다음과 같이 기본값을 제공하는 것을 고려해보세요:

- const { children } = props;
+ const { children = '내용이 없습니다.' } = props;

Also applies to: 14-14

apps/web/app/meetings/_components/Schedule/ScheduleTable/index.tsx (2)

7-11: 인터페이스 정의가 명확하게 되어있습니다.

ScheduleTableProps 인터페이스가 필요한 모든 속성을 포함하고 있으며, 각 속성의 타입이 명확하게 정의되어 있습니다.

다만, 추가적인 타입 안전성을 위해 다음과 같은 개선을 고려해보시면 좋을 것 같습니다:

 interface ScheduleTableProps {
   rooms: TBaseItem[];
   meetingsData: IReservation[];
-  selectedDate: string;
+  selectedDate: string; // ISO 8601 format (YYYY-MM-DD)
 }

---

14-19: 컴포넌트 구현이 적절하게 되어있습니다.

props 구조 분해와 하위 컴포넌트로의 데이터 전달이 일관성 있게 구현되어 있습니다. 모바일과 데스크톱 버전 모두에 동일한 데이터가 전달되고 있습니다.

하지만 성능 최적화를 위해 다음과 같은 개선을 제안드립니다:

-export default function ScheduleTable(props: ScheduleTableProps): JSX.Element {
+const ScheduleTable = memo(function ScheduleTable(props: ScheduleTableProps): JSX.Element {
   const { rooms, meetingsData, selectedDate } = props;

   return (
     <div className="overflow-hidden">
       <ScheduleTableMobile rooms={rooms} meetingsData={meetingsData} selectedDate={selectedDate} />
       <ScheduleTableDesktop rooms={rooms} meetingsData={meetingsData} selectedDate={selectedDate} />
     </div>
   );
-}
+});
+
+export default ScheduleTable;

불필요한 리렌더링을 방지하기 위해 memo를 사용하는 것을 고려해보세요. 특히 rooms와 meetingsData 배열이 자주 변경되지 않는 경우 유용할 수 있습니다.

apps/web/app/meetings/_components/skeleton/ScheduleSlotSkeleton.tsx (2)

8-9: 하드코딩된 값에 대한 설명이 필요합니다

length: 7와 width: 72 * 49와 같은 하드코딩된 값들의 의미를 주석으로 설명하면 코드의 가독성이 향상될 것 같습니다.

다음과 같이 주석을 추가하는 것을 제안합니다:

+ // 7: 일주일의 요일 수
  {Array.from({ length: 7 }, (_, index) => (
+   // 72px: 기본 셀 너비, 49: 시간대 수 (예: 오전 9시 ~ 오후 10시)
    <div className="relative mb-36" style={{ width: 72 * 49, height: 80 }} key={`Slot-${index}`}>

---

7-16: 접근성 개선이 필요합니다

스켈레톤 UI의 접근성을 개선하기 위해 aria 속성을 추가하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:

- <div className="relative h-full w-full">
+ <div 
+   className="relative h-full w-full"
+   role="status"
+   aria-label="일정 로딩 중"
+ >
    {Array.from({ length: 7 }, (_, index) => (
      <div className="relative mb-36" style={{ width: 72 * 49, height: 80 }} key={`Slot-${index}`}>
        <div className="absolute inset-0 flex items-center justify-center">
-         <div className="absolute top-1/2 h-16 w-full -translate-y-1/2 transform bg-gray-400" />
+         <div 
+           className="absolute top-1/2 h-16 w-full -translate-y-1/2 transform bg-gray-400"
+           aria-hidden="true"
+         />
        </div>
        <div className="border-gray-10 md:h-110 absolute left-0 top-0 h-full border-l-2" />
      </div>
    ))}
+   <span className="sr-only">로딩중...</span>
  </div>

apps/web/app/meetings/_components/Reservation/ReservationForm/NotesInput.tsx (1)

17-17: 불필요한 삼항 연산자 사용

error={error ? error : undefined}는 error={error}로 단순화할 수 있습니다. TypeScript는 자동으로 undefined를 처리합니다.

apps/web/app/meetings/_components/Reservation/ReservationModal.tsx (2)

10-13: 인터페이스 확장이 잘 되었습니다만, 문서화를 개선하면 좋겠습니다.

새로운 프로퍼티들이 잘 추가되었습니다. 하지만 각 프로퍼티의 목적과 사용법을 더 자세히 설명하는 JSDoc 주석을 추가하면 좋을 것 같습니다.

다음과 같이 JSDoc 주석을 추가하는 것을 제안드립니다:

 interface ReservationModalProps {
   isOpen: boolean;
   onClose: () => void;
   onConfirm: () => void;
-  title: string; // 추가
-  content: ReactNode; // 추가
-  cancelButtonName: string; // 추가
-  confirmButtonName: string; // 추가
+  /** 모달의 제목 */
+  title: string;
+  /** 모달의 내용 (React 컴포넌트 지원) */
+  content: ReactNode;
+  /** 취소 버튼에 표시될 텍스트 */
+  cancelButtonName: string;
+  /** 확인 버튼에 표시될 텍스트 */
+  confirmButtonName: string;
 }

---

32-35: AlertModal에 프로퍼티 전달이 잘 되었습니다만, 개선의 여지가 있습니다.

프로퍼티 전달은 정확하게 되었지만, 불필요한 래핑을 제거하여 코드를 더 간결하게 만들 수 있습니다.

onConfirm 핸들러를 다음과 같이 단순화하는 것을 제안드립니다:

     <AlertModal
       isOpen={isOpen}
       onClose={onClose}
-      onConfirm={() => {
-        onConfirm();
-      }}
+      onConfirm={onConfirm}
       title={title}
       content={content}
       cancelButtonName={cancelButtonName}
       confirmButtonName={confirmButtonName}
     />

apps/web/app/meetings/_components/Schedule/ScheduleRow/CurrentTimeIndicator.tsx (2)

14-18: 성능 최적화를 위한 제안

useCurrentTimePosition 훅의 반환값이 자주 업데이트될 수 있으므로, 불필요한 리렌더링을 방지하기 위해 useMemo나 React.memo의 사용을 고려해보세요.

+const MemoizedCurrentTimeLabel = React.memo(CurrentTimeLabel);

 export default function CurrentTimeIndicator(props: CurrentTimeIndicatorProps): JSX.Element {
   const { slotWidth, startHour, endHour } = props;
   const { currentPosition, currentTime } = useCurrentTimePosition({
     slotWidth,
     startHour,
     endHour,
   });

---

20-22: null 케이스 처리 개선 제안

빈 div 대신 의미있는 컴포넌트나 null을 반환하는 것이 더 명확할 것 같습니다.

-  if (currentPosition === null) {
-    return <div />;
-  }
+  if (currentPosition === null) {
+    return null;
+  }

apps/web/app/constants/reservationConstants.ts (3)

1-2: ESLint 규칙 비활성화에 대한 설명이 필요합니다

ESLint 규칙을 비활성화하는 이유를 주석으로 설명해주시면 좋겠습니다.

-/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/naming-convention */
+// 상수 네이밍에 대한 ESLint 규칙을 비활성화합니다.
+// 이는 NOTIFICATION_MESSAGES와 같은 대문자 상수명을 허용하기 위함입니다.

---

8-12: 알림 메시지 상수가 잘 정의되었습니다

알림 메시지가 일관성 있게 정의되어 있습니다. 다만, 실패 케이스에 대한 메시지도 추가하면 좋을 것 같습니다.

 export const NOTIFICATION_MESSAGES = {
   create: "회의실이 예약되었습니다.",
   update: "예약이 수정되었습니다.",
   delete: "예약이 삭제되었습니다.",
+  error: {
+    create: "예약 생성 중 오류가 발생했습니다.",
+    update: "예약 수정 중 오류가 발생했습니다.",
+    delete: "예약 삭제 중 오류가 발생했습니다.",
+  },
 };

---

14-16: 쿼리 키 구조 검토가 필요합니다

쿼리 키가 배열 형태로 반환되고 있는데, 타입 안정성을 위해 as const 대신 더 명시적인 타입을 사용하는 것이 좋을 것 같습니다.

+type MeetingsQueryKey = readonly ["meetings", string, string];
+
 export const QUERY_KEYS = {
-  meetings: (date: string, type: string) => ["meetings", date, type] as const,
+  meetings: (date: string, type: string): MeetingsQueryKey => ["meetings", date, type],
 };

apps/web/app/meetings/_components/skeleton/index.tsx (1)

12-16: 상수로 분리하여 코드의 의도를 명확히 표현해주세요.

매직 넘버 7을 의미 있는 상수로 분리하면 코드의 가독성이 향상될 것 같습니다.

다음과 같이 변경을 제안드립니다:

+const TOTAL_ROOM_COUNT = 7;
 
 function MeetingsSkeleton(): JSX.Element {
   return (
     // ...
-    {Array.from({ length: 7 }).map((_, index) => (
+    {Array.from({ length: TOTAL_ROOM_COUNT }).map((_, index) => (

apps/web/app/meetings/_components/Reservation/MobileReservationSheet.tsx (2)

6-11: 인터페이스에 JSDoc 문서화를 추가하면 좋을 것 같습니다.

각 프로퍼티의 목적과 사용법을 명확히 이해할 수 있도록 JSDoc 문서화를 추가하는 것이 좋겠습니다.

예시:

+/**
+ * 모바일 예약 시트의 프로퍼티
+ */
 interface MobileReservationSheetProps {
+  /** 시트의 열림 상태 */
   isOpen: boolean;
+  /** 시트 닫기 핸들러 */
   onClose: () => void;
+  /** 선택된 시간 */
   selectedTime: string;
+  /** 선택된 예약 정보 */
   selectedSchedule?: IReservation | null;
+  /** 선택된 회의실 정보 */
   selectedRoom?: SelectedRoom | null;
 }

---

14-31: 컴포넌트 구현이 깔끔하며, 한 가지 개선사항을 제안드립니다.

컴포넌트 구현이 전반적으로 잘 되어있습니다. 다만, snapPoints 값을 상수로 분리하면 더 좋을 것 같습니다.

다음과 같이 상수를 분리하는 것을 제안드립니다:

+const SHEET_SNAP_POINTS = [0.8] as const;
+const INITIAL_SNAP_INDEX = 0;

 export default function MobileReservationSheet(props: MobileReservationSheetProps): JSX.Element {
   const { isOpen, onClose, selectedTime, selectedSchedule, selectedRoom } = props;

   return (
-    <Sheet isOpen={isOpen} onClose={onClose} snapPoints={[0.8]} initialSnap={0} className="!z-50 block md:hidden">
+    <Sheet isOpen={isOpen} onClose={onClose} snapPoints={SHEET_SNAP_POINTS} initialSnap={INITIAL_SNAP_INDEX} className="!z-50 block md:hidden">

apps/web/components/common/Profile/index.tsx (1)

35-35: 인라인 스타일을 Tailwind CSS 클래스로 변경한 것이 좋습니다!

Tailwind CSS 클래스를 사용하여 스타일을 적용한 것은 코드의 일관성과 유지보수성을 향상시킵니다.

접근성 향상을 위해 다음과 같이 alt 텍스트를 더 구체적으로 수정하는 것을 제안합니다:

-        alt="프로필 이미지"
+        alt={`${name || '사용자'}의 프로필 이미지`}

apps/web/app/meetings/_components/Reservation/ReservationSheets.tsx (1)

18-18: 빈 상태 처리를 개선해 주세요.

현재 selectedTime 또는 selectedRoom이 없을 때 빈 div를 반환하고 있습니다. 사용자 경험 향상을 위해 의미 있는 빈 상태를 표시하는 것이 좋습니다.

다음과 같이 개선해 보세요:

- if (!selectedTime || !selectedRoom) return <div />;
+ if (!selectedTime || !selectedRoom) {
+   return (
+     <div className="flex items-center justify-center p-4 text-gray-500">
+       예약 정보를 불러올 수 없습니다
+     </div>
+   );
+ }

apps/web/app/meetings/_components/Schedule/ScheduleRow/ScheduleItem.tsx (2)

42-42: 툴팁 내용 변경에 대한 검토 필요

schedule.title 대신 schedule.notes를 표시하도록 변경되었습니다. 다음 사항들을 고려해주세요:

1. notes가 없는 경우 빈 툴팁이 표시될 수 있습니다
2. 긴 notes 내용에 대한 처리가 필요할 수 있습니다

다음과 같은 개선을 제안드립니다:

-{isCurrentUser ? null : <ScheduleTooltip>{schedule.notes}</ScheduleTooltip>}
+{isCurrentUser ? null : (
+  <ScheduleTooltip>
+    {schedule.notes || '예약 정보 없음'}
+  </ScheduleTooltip>
+)}

---

Line range hint 28-33: 클릭 이벤트 처리 로직 개선 필요

현재 사용자의 일정만 클릭 가능하도록 되어있는데, 다른 사용자의 일정도 읽기 전용으로 볼 수 있게 하는 것이 좋을 것 같습니다.

다음과 같은 개선을 제안드립니다:

onClick={(e) => {
  e.stopPropagation();
-  if (isCurrentUser) onClick();
+  onClick();  // 모든 일정 클릭 가능하도록 수정
}}

apps/web/app/_hooks/useSlotReservations.ts (4)

6-13: JSDoc 문서 개선 제안

현재 문서화가 잘 되어 있지만, 실제 사용 예시를 추가하면 더욱 유용할 것 같습니다. 또한 반환되는 배열의 각 요소가 null일 때의 의미도 설명하면 좋겠습니다.

다음과 같이 문서를 보완하는 것을 제안합니다:

 /**
  * 예약 데이터를 슬롯 인덱스에 매핑하는 커스텀 훅
  * @param schedules 예약 데이터 배열
  * @param startHour 시작 시간
  * @param endHour 종료 시간
  * @param minutesPerSlot 슬롯당 분 단위
  * @returns 슬롯별 예약 상태 배열
+ * @example
+ * const slots = useSlotReservations(schedules, 9, 18, 30);
+ * // slots[0]이 null인 경우: 해당 시간대에 예약이 없음
+ * // slots[0]이 IReservation인 경우: 해당 시간대에 예약이 있음
  */

---

21-21: 매직 넘버 상수화 필요

코드에서 사용된 숫자 2는 30분 단위 계산을 위한 것으로 보이지만, 이해하기 어려울 수 있습니다. 의미 있는 상수로 추출하는 것이 좋겠습니다.

+const SLOTS_PER_HOUR = 2; // 30분 단위
-const totalSlots = (endHour - startHour) * 2; // 30분 단위
+const totalSlots = (endHour - startHour) * SLOTS_PER_HOUR;

---

24-36: 예약 시간 중복 처리 로직 개선 필요

현재 구현에서는 동일한 시간대에 여러 예약이 있을 경우, 마지막 예약만 저장됩니다. 이는 의도된 동작인지 확인이 필요하며, 중복 예약을 감지하고 처리하는 로직이 필요할 수 있습니다.

중복 예약 처리를 위한 두 가지 접근 방식을 제안합니다:

1. 중복 예약 감지 및 경고:

if (slotReservations[i] !== null) {
  console.warn(`시간 중복 발생: ${schedule.startAt} - ${schedule.endAt}`);
}

2. 중복 예약 정보 보존:

// IReservation | IReservation[] | null 타입으로 변경
if (slotReservations[i] !== null) {
  slotReservations[i] = Array.isArray(slotReservations[i])
    ? [...slotReservations[i], schedule]
    : [slotReservations[i], schedule];
}

---

20-39: 성능 최적화 관련 조언

useMemo의 의존성 배열에 포함된 값들의 변경이 빈번할 경우 메모이제이션의 이점이 감소할 수 있습니다. 특히 schedules 배열이 자주 변경되는 경우, 최적화 전략을 재검토해야 할 수 있습니다.

다음과 같은 최적화 전략을 고려해보세요:

1. schedules 배열을 안정적으로 유지하기 위해 상위 컴포넌트에서 useMemo 사용
2. 필요한 경우 useCallback과 함께 사용하여 콜백 함수의 안정성 보장
3. 데이터 구조를 최적화하여 불필요한 재계산 방지

apps/web/app/meetings/_components/MeetingRoomSchedule.tsx (2)

3-11: 임포트 구문 개선 제안

임포트 구문을 다음과 같은 순서로 정리하면 코드의 가독성이 향상될 것 같습니다:

1. 외부 라이브러리
2. 타입 정의
3. 내부 유틸리티/상수
4. 컴포넌트

-import { type IReservation, type TBaseItem } from "@repo/types";
-import { useQuery } from "@tanstack/react-query";
-import { useDateStore } from "@/app/store/useDateStore";
-import { MEETING_ROOMS_TYPE } from "@/app/constants/meetingRoomsType";
-import { formatDate } from "@/app/utils/formatDate";
-import { getAllItems } from "@/api/items";
-import { getReservationsByTypeAndDate } from "@/api/reservations";
-import ScheduleTable from "./Schedule/ScheduleTable";
-import MeetingsSkeleton from "./skeleton";
+import { useQuery } from "@tanstack/react-query";
+
+import { type IReservation, type TBaseItem } from "@repo/types";
+
+import { useDateStore } from "@/app/store/useDateStore";
+import { MEETING_ROOMS_TYPE } from "@/app/constants/meetingRoomsType";
+import { formatDate } from "@/app/utils/formatDate";
+import { getAllItems } from "@/api/items";
+import { getReservationsByTypeAndDate } from "@/api/reservations";
+
+import ScheduleTable from "./Schedule/ScheduleTable";
+import MeetingsSkeleton from "./skeleton";

---

28-31: 에러 바운더리 및 Props 타입 검증 추가 필요

1. 에러 바운더리를 추가하여 컴포넌트 크래시를 방지해야 합니다.
2. ScheduleTable 컴포넌트의 props 타입을 명시적으로 정의해야 합니다.

+interface ScheduleTableProps {
+  rooms: TBaseItem[];
+  meetingsData: IReservation[];
+  selectedDate: string;
+}
+
+// ErrorBoundary 컴포넌트 추가 필요
 if (meetingsIsLoading || roomsIsLoading) return <MeetingsSkeleton />;
 
 return <ScheduleTable rooms={roomsData} meetingsData={meetingsData} selectedDate={formattedDate} />;

apps/web/app/types/ReservationFormTypes.ts (4)

6-13: 인터페이스 문서화 개선 제안

각 프로퍼티의 목적과 사용 사례를 명확히 하기 위해 JSDoc 문서화를 추가하는 것이 좋겠습니다.

+/**
+ * 예약 폼 컴포넌트의 프로퍼티
+ */
 export interface ReservationFormProps {
+  /** 폼 제출 시 호출되는 함수. 새로운 예약 생성 또는 기존 예약 수정에 사용됨 */
   onSubmit: (data: CreateReservationRequest, itemId: string, reservationId?: string) => void;
+  /** 선택된 시간 (ISO 문자열 형식) */
   selectedTime: string;
+  /** 수정 모드에서 사용되는 기존 예약 정보 */
   selectedSchedule?: IReservation | null;
+  /** 폼 초기화를 트리거하는 값 */
   resetTrigger?: number;
+  /** 선택된 회의실 정보 */
   selectedRoom?: SelectedRoom | null;
+  /** 예약 삭제 시 호출되는 함수 */
   onDelete: () => void;
 }

---

19-22: selectedRoom 타입 개선 제안

회의실 식별자로 string 대신 더 구체적인 타입을 사용하면 타입 안정성이 향상될 것 같습니다.

 export interface RoomDropdownProps {
-  selectedRoom: string;
+  selectedRoom: SelectedRoom['id'];
   onSelect: (value: string) => void;
 }

---

32-37: 에러 상태 타입 개선 제안

isError boolean 대신 구체적인 에러 정보를 포함할 수 있도록 개선하면 좋겠습니다.

 export interface AttendeesMultiSelectProps {
   control: Control<CreateReservationRequest>;
   allUsersData: IUser[];
   isLoading: boolean;
-  isError: boolean;
+  error?: {
+    code: string;
+    message: string;
+  };
 }

---

39-41: 삭제 작업 안전성 개선 제안

삭제 작업의 안전성을 높이기 위해 확인 단계 관련 프로퍼티를 추가하면 좋겠습니다.

 export interface DeleteButtonProps {
   onDelete: () => void;
+  requireConfirmation?: boolean;
+  confirmationMessage?: string;
 }

apps/web/app/meetings/_components/Reservation/ReservationForm/RoomDropdown.tsx (3)

1-9: ESLint 규칙 비활성화 범위 수정 필요

파일 전체에 대한 no-nested-ternary 규칙 비활성화는 바람직하지 않습니다. 특정 코드 블록에만 적용되도록 수정하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:

-/* eslint-disable no-nested-ternary */

그리고 필요한 부분에만 다음과 같이 적용:

// eslint-disable-next-line no-nested-ternary
{isLoading ? (...) : isError ? (...) : (...)}

---

10-19: Query 설정 개선 필요

현재 구현은 기본적인 기능은 제공하지만, 다음 사항들을 고려해보시기 바랍니다:

• 에러 재시도 설정
• 캐시 시간 설정
• 스태일 타임 설정

다음과 같이 수정하는 것을 제안합니다:

  useQuery<TBaseItem[]>({
    queryKey: ["Rooms", MEETING_ROOMS_TYPE],
    queryFn: () => getAllItems({ itemType: MEETING_ROOMS_TYPE }),
+   retry: 2,
+   staleTime: 5 * 60 * 1000, // 5분
+   cacheTime: 30 * 60 * 1000, // 30분
  });

---

30-30: 접근성 개선 필요

스크롤 가능한 드롭다운 메뉴의 접근성을 개선해야 합니다.

다음과 같이 ARIA 속성을 추가하는 것을 제안합니다:

-<Dropdown.Wrapper className="max-h-160 md:max-h-300 no-scrollbar overflow-y-auto">
+<Dropdown.Wrapper 
+  className="max-h-160 md:max-h-300 no-scrollbar overflow-y-auto"
+  role="listbox"
+  aria-label="회의실 목록">

apps/web/app/_hooks/useCurrentTimePosition.ts (1)

14-20: 초기 상태 설정이 잘 되어있으나, 성능 최적화를 위한 제안이 있습니다.

useState 초기값을 계산하는 함수를 추가하여 첫 렌더링 시 현재 시간 위치를 즉시 계산하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:

-  const [currentPosition, setCurrentPosition] = useState<number | null>(null);
-  const [currentTime, setCurrentTime] = useState<string>("");
+  const [currentPosition, setCurrentPosition] = useState<number | null>(() => {
+    const now = new Date();
+    const currentMinutes = now.getHours() * 60 + now.getMinutes();
+    if (currentMinutes < startHour * 60 || currentMinutes >= endHour * 60) {
+      return null;
+    }
+    const relativeMinutes = currentMinutes - startHour * 60;
+    const totalMinutes = (endHour - startHour) * 60;
+    const scheduleWidth = slotWidth * (endHour - startHour) * 2;
+    return (relativeMinutes / totalMinutes) * scheduleWidth;
+  });
+  const [currentTime, setCurrentTime] = useState<string>(() => {
+    const now = new Date();
+    return `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
+  });

apps/web/app/meetings/_components/Schedule/ScheduleRow/ScheduleSlots.tsx (3)

5-10: 인터페이스에 JSDoc 문서를 추가하는 것이 좋습니다

각 프로퍼티의 목적과 사용법을 명확하게 설명하는 문서를 추가하면 컴포넌트의 재사용성이 향상될 것 같습니다.

+/**
+ * ScheduleSlots 컴포넌트의 프로퍼티
+ */
 interface ScheduleSlotsProps {
+  /** 각 시간대별 예약 정보 배열 */
   slotReservations: (IReservation | null)[];
+  /** 각 슬롯의 너비 (픽셀) */
   slotWidth: number;
+  /** 각 슬롯의 높이 (픽셀) */
   slotHeight: number;
+  /** 슬롯 클릭 시 호출되는 콜백 함수 */
   onSlotClick: (index: number, schedule?: IReservation) => void;
 }

---

12-15: 성능 최적화를 위한 메모이제이션 검토가 필요합니다

컴포넌트가 자주 리렌더링될 수 있으므로, useMemo와 useCallback을 활용하여 최적화하는 것이 좋습니다.

+import { useMemo, useCallback } from "react";

 export default function ScheduleSlots(props: ScheduleSlotsProps): JSX.Element {
   const { slotReservations, slotWidth, slotHeight, onSlotClick } = props;
-  const slots: JSX.Element[] = [];
+  const handleSlotClick = useCallback((index: number, schedule?: IReservation) => {
+    onSlotClick(index, schedule);
+  }, [onSlotClick]);
   const totalSlots = slotReservations.length;

---

63-64: 에러 바운더리 추가를 고려해보세요

예약 데이터 처리 중 발생할 수 있는 예외 상황을 대비하여 에러 바운더리를 추가하면 좋을 것 같습니다.

+import { ErrorBoundary } from '@repo/ui/error-boundary';

 export default function ScheduleSlots(props: ScheduleSlotsProps): JSX.Element {
   // ...

-  return <>{slots}</>;
+  return (
+    <ErrorBoundary fallback={<div>일정을 불러오는 중 문제가 발생했습니다.</div>}>
+      {slots}
+    </ErrorBoundary>
+  );
 }

apps/web/api/items.ts (1)

44-61: 아이템 ID 검증과 낙관적 업데이트 구현이 필요합니다.

현재 구현에서는 itemId의 유효성 검증이 없으며, 사용자 경험 향상을 위한 낙관적 업데이트가 구현되어 있지 않습니다.

다음 사항들을 고려해보세요:

1. itemId 형식 검증
2. 낙관적 업데이트 구현으로 UI 응답성 향상
3. 업데이트 실패 시 롤백 처리

예시 구현:

// utils/validation.ts에 추가
export const validateItemId = (itemId: string): boolean => {
  return /^[0-9a-fA-F]{24}$/.test(itemId); // MongoDB ObjectId 형식 검증 예시
};

// items.ts 수정
export const updateItem = async (params: UpdateItemParams): Promise<TBaseItem> => {
  const { itemId, itemData } = params;
  
  if (!validateItemId(itemId)) {
    throw new Error('유효하지 않은 아이템 ID입니다.');
  }

  // 낙관적 업데이트를 위한 이전 상태 저장
  const previousState = store.getState().items[itemId];
  
  try {
    // 낙관적 업데이트 적용
    store.dispatch(updateItemOptimistic({ itemId, itemData }));
    
    const { data } = await axiosRequester<TBaseItem>({...});
    return data;
  } catch (error) {
    // 실패 시 이전 상태로 롤백
    store.dispatch(revertItemUpdate({ itemId, previousState }));
    throw error;
  }
};

apps/web/app/meetings/_components/Schedule/ScheduleRow/ScheduleSlot.tsx (2)

18-24: 사용자 정보 접근 시 타입 안전성 개선이 필요합니다.

useAuthStore에서 가져온 사용자 정보가 없을 수 있으므로, 이에 대한 처리가 필요합니다.

다음과 같이 초기 로딩 상태 처리를 추가하는 것을 고려해보세요:

- const user = useAuthStore((state) => state.user);
+ const user = useAuthStore((state) => state.user);
+ const isLoading = useAuthStore((state) => state.isLoading);
+ 
+ if (isLoading) {
+   return <div>로딩 중...</div>;
+ }

---

36-53: 스타일링 관리 방식 개선이 필요합니다.

현재 인라인 스타일과 문자열 연결을 통한 클래스 관리는 유지보수가 어려울 수 있습니다.

다음과 같이 tailwind 클래스를 좀 더 체계적으로 관리하는 것을 추천드립니다:

- className={`hover:bg-gray-60 relative cursor-pointer ${isClicked ? "bg-purple-100" : ""} ${
-   isUserReservation ? "hover:bg-purple-100" : ""
- }`}
+ className={clsx(
+   'relative cursor-pointer',
+   'hover:bg-gray-60',
+   isClicked && 'bg-purple-100',
+   isUserReservation && 'hover:bg-purple-100'
+ )}

또한 예약된 슬롯의 스타일을 상수로 분리하여 관리하는 것이 좋습니다:

const RESERVED_SLOT_STYLES = {
  height: '4rem',
  backgroundColor: 'var(--purple-400)'
} as const;

apps/web/app/utils/validateTime.ts (6)

9-20: 인터페이스에 JSDoc 문서를 추가하는 것이 좋습니다.

각 매개변수의 목적과 사용법을 명확하게 설명하는 문서를 추가하면 코드의 가독성과 유지보수성이 향상될 것 같습니다.

예시:

+/**
+ * 예약 종료 시간 검증을 위한 매개변수 인터페이스
+ * @param endAt - 예약 종료 시간 (HH:mm 형식)
+ * @param getValues - form 값을 가져오는 함수
+ * @param selectedMeetingRoom - 선택된 회의실 정보
+ * @param selectedDate - 선택된 날짜 정보
+ * @param meetingsData - 기존 예약 데이터 목록
+ * @param selectedReservationId - 수정 중인 예약 ID (선택사항)
+ */
interface ValidateTimeParams {

---

22-29: 함수에 JSDoc 문서를 추가하는 것이 좋습니다.

반환 값의 의미와 함수의 목적을 명확하게 설명하는 문서가 필요합니다.

+/**
+ * 예약 종료 시간의 유효성을 검사하는 함수
+ * @returns true if valid, error message string if invalid
+ */
export function validateEndAt({

---

36-43: 시간 파싱 로직이 견고해 보입니다.

시간 차이 검증이 잘 구현되어 있습니다. parse 함수 사용 시 발생할 수 있는 예외 처리를 추가하면 더 좋을 것 같습니다.

+try {
   const start = parse(startAtValue, "HH:mm", new Date());
   const end = parse(endAt, "HH:mm", new Date());
+} catch (error) {
+  return ERROR_MESSAGES.invalidTimeFormat;
+}

---

45-47: 조기 반환 조건에 대한 설명이 필요합니다.

회의실이 선택되지 않은 경우 true를 반환하는 이유를 주석으로 설명하면 좋을 것 같습니다.

+// 회의실이 선택되지 않은 경우 중복 검사를 수행하지 않고 유효한 것으로 처리
 if (!selectedMeetingRoom?._id) {
   return true;
 }

---

51-54: 날짜 문자열 생성 로직을 유틸리티 함수로 분리하는 것이 좋습니다.

날짜 문자열 생성 로직이 반복되므로, 재사용 가능한 유틸리티 함수로 분리하면 코드 중복을 줄일 수 있습니다.

+const createDateString = (year: number, month: number, day: number, time: string) =>
+  `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}T${time}:00`;

-const newStart = new Date(
-  `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}T${startAtValue}:00`,
-);
+const newStart = new Date(createDateString(year, month, day, startAtValue));

---

61-68: 아이템 ID 추출 로직을 별도 함수로 분리하면 좋을 것 같습니다.

복잡한 타입 체크 로직을 별도의 유틸리티 함수로 분리하면 코드의 가독성이 향상될 것 같습니다.

+const getItemId = (item: string | { _id: string } | unknown): string | null => {
+  if (typeof item === "string") return item;
+  if (typeof item === "object" && item && "_id" in item) return item._id;
+  return null;
+};

-let itemId: string;
-if (typeof reservation.item === "string") {
-  itemId = reservation.item;
-} else if ("_id" in reservation.item) {
-  itemId = reservation.item._id;
-} else {
-  return false;
-}
+const itemId = getItemId(reservation.item);
+if (!itemId) return false;

apps/web/app/meetings/_components/Reservation/ReservationForm/AttendeesMultiSelect.tsx (4)

1-8: 임포트 구문 개선 제안

임포트 구문을 다음과 같이 그룹화하면 가독성이 향상될 것 같습니다:

1. 외부 라이브러리
2. UI 컴포넌트
3. 타입
4. 상수

+ // External libraries
 import { Controller } from "react-hook-form";
+ 
+ // UI Components
 import MultiSelectDropdown from "@ui/src/components/common/Dropdown/MultiSelectDropdown";
 import { Badge } from "@ui/index";
 import Profile from "@/components/common/Profile";
+
+ // Types
 import { type IUser } from "@repo/types";
 import { type AttendeesMultiSelectProps } from "@/app/types/ReservationFormTypes";
+
+ // Constants
 import { ERROR_MESSAGES, FORM_LABELS } from "@/app/constants/reservationFormConstants";

---

29-39: 성능 및 접근성 개선 제안

1. 성능 최적화:

• allUsersData.find() 호출이 매 렌더링마다 발생합니다. 선택된 사용자 정보를 미리 매핑해두면 좋을 것 같습니다.

2. 접근성 개선:

• 추가 참석자 수를 나타내는 텍스트에 aria-label을 추가하면 좋을 것 같습니다.

- {field.value.slice(0, 3).map((name) => {
-   const matchingUser = allUsersData.find((user) => user.name === name);
+ const selectedUsers = field.value.slice(0, 3).map((name) => 
+   allUsersData.find((user) => user.name === name)
+ ).filter(Boolean);
+ 
+ {selectedUsers.map((matchingUser) => {
   return matchingUser ? (
     <Badge key={matchingUser._id} color="purple" shape="round" colorApplyTo="font">
       {matchingUser.name}
     </Badge>
   ) : null;
 })}
 {field.value.length > 3 && (
-   <span className="text-purple-30 text-xs-semibold mx-10">+{field.value.length - 3}명</span>
+   <span 
+     className="text-purple-30 text-xs-semibold mx-10"
+     aria-label={`외 ${field.value.length - 3}명의 참석자`}
+   >
+     +{field.value.length - 3}명
+   </span>
 )}

---

45-48: 로딩 및 에러 상태 UI 개선 제안

현재 상태 메시지들이 단순한 div로 표시되어 있습니다. 사용자 경험 향상을 위해 다음과 같은 개선을 제안드립니다:

1. 로딩 상태에 스켈레톤 UI 추가
2. 에러 상태에 재시도 버튼 추가
3. 빈 상태에 적절한 아이콘 추가

- {isLoading ? <div>사용자 데이터 로딩 중...</div> : null}
- {isError && !isLoading ? <div>{ERROR_MESSAGES.userFetchError}</div> : null}
- {!isLoading && !isError && allUsersData.length === 0 && <div>참여자가 없습니다.</div>}
+ {isLoading ? (
+   <div className="flex items-center space-x-2 p-4">
+     <div className="animate-pulse h-27 w-27 rounded-full bg-gray-200" />
+     <div className="animate-pulse h-4 w-32 bg-gray-200 rounded" />
+   </div>
+ ) : null}
+ {isError && !isLoading ? (
+   <div className="flex flex-col items-center p-4 text-red-500">
+     <p>{ERROR_MESSAGES.userFetchError}</p>
+     <button 
+       onClick={onRetry}
+       className="mt-2 text-sm text-purple-500 hover:text-purple-600"
+     >
+       다시 시도
+     </button>
+   </div>
+ ) : null}
+ {!isLoading && !isError && allUsersData.length === 0 && (
+   <div className="flex flex-col items-center p-4 text-gray-500">
+     <UserIcon className="w-6 h-6 mb-2" />
+     <p>참여자가 없습니다.</p>
+   </div>
+ )}

---

63-70: 팀 태그 스타일링 및 접근성 개선 제안

팀 태그의 스타일링과 접근성을 개선하면 좋을 것 같습니다:

1. 태그 컴포넌트 분리
2. 색상 변수 사용
3. 접근성 속성 추가

- {user.teams.map((team: string) => (
-   <div
-     key={team}
-     className="text-xxs-medium flex h-12 items-center justify-center rounded-lg bg-purple-100 p-6 py-10 text-purple-300"
-   >
-     {team}
-   </div>
- ))}
+ {user.teams.map((team: string) => (
+   <span
+     key={team}
+     role="badge"
+     aria-label={`${team} 팀`}
+     className="text-xxs-medium inline-flex h-12 items-center justify-center rounded-lg bg-purple-100 px-6 py-2 text-purple-300"
+   >
+     {team}
+   </span>
+ ))}

apps/web/app/meetings/_components/Reservation/ReservationForm/TimeSelectors.tsx (2)

16-22: 에러 메시지 처리 최적화 제안

현재 에러 메시지를 배열에 push하는 방식은 불필요한 배열 조작을 발생시킵니다.

다음과 같이 map을 사용하여 더 선언적으로 처리하는 것을 추천드립니다:

-  const errorMessages = [];
-  if (errors.startAt) {
-    errorMessages.push(errors.startAt.message);
-  }
-  if (errors.endAt) {
-    errorMessages.push(errors.endAt.message);
-  }
+  const errorMessages = ['startAt', 'endAt']
+    .map(field => errors[field]?.message)
+    .filter(Boolean);

---

61-64: 검증 로직 개선 제안

현재 검증 로직이 단순한 필수 값 체크와 validateEndAt 함수에만 의존하고 있습니다.

시작 시간과의 관계를 더 명확하게 검증하는 것을 추천드립니다:

 rules={{
   required: ERROR_MESSAGES.timeRequired,
-  validate: validateEndAt,
+  validate: {
+    isAfterStart: validateEndAt,
+    isDurationValid: (value, formValues) => {
+      // 예약 시간이 최소 30분에서 최대 4시간 사이인지 확인
+      return true || ERROR_MESSAGES.invalidDuration;
+    }
+  },
 }}

apps/web/app/meetings/_components/Reservation/ReservationSheetContent.tsx (3)

1-3: ESLint 설정 개선이 필요합니다.

전역 ESLint 비활성화보다는 특정 라인에 대해서만 규칙을 비활성화하는 것이 좋습니다.

다음과 같이 수정하는 것을 추천드립니다:

-/* eslint-disable @typescript-eslint/no-shadow */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-
+// ESLint 규칙은 필요한 특정 라인에만 적용하세요

---

25-30: 인터페이스와 상태 타입 문서화가 필요합니다.

Props 인터페이스와 폼 데이터 타입에 대한 JSDoc 문서화가 누락되었습니다. 또한 폼 데이터의 타입 안전성을 개선할 수 있습니다.

다음과 같이 개선하는 것을 추천드립니다:

/**
 * 예약 시트 컨텐츠 컴포넌트의 props 인터페이스
 * @property onClose - 시트를 닫는 콜백 함수
 * @property selectedTime - 선택된 시간
 * @property selectedSchedule - 선택된 일정 (수정 모드에서 사용)
 * @property selectedRoom - 선택된 회의실
 */
interface ReservationSheetContentProps {
  onClose: () => void;
  selectedTime: string;
  selectedSchedule?: IReservation | null;
  selectedRoom?: SelectedRoom | null;
}

type FormDataType = {
  data: CreateReservationRequest;
  itemId: string;
  reservationId?: string;
} | null;

Also applies to: 43-47

---

105-111: 모달 텍스트 로직 단순화가 필요합니다.

모달 텍스트 설정 로직이 반복되어 있어 단순화가 가능합니다.

다음과 같이 개선하는 것을 추천드립니다:

const getModalConfig = () => {
  const mode = isEditMode ? 'edit' : modalType;
  return {
    title: MODAL_TEXT.titles[mode],
    content: MODAL_TEXT.contents[mode],
    confirmButtonName: MODAL_TEXT.confirmButtonNames[mode],
  };
};

const { title, content, confirmButtonName } = getModalConfig();

packages/ui/src/components/common/Dropdown/MultiSelectDropdown.tsx (1)

159-159: className 적용 방식 개선을 제안드립니다.

현재 구현은 작동하지만, cn 유틸리티를 사용할 때 기본 클래스와 커스텀 클래스의 우선순위를 더 명확하게 제어할 수 있습니다.

다음과 같이 수정하는 것을 제안드립니다:

-            className,
+            className ?? '',  // 명시적으로 undefined 처리

이렇게 하면 className이 undefined일 때의 동작이 더 예측 가능해집니다.

Also applies to: 181-181

apps/web/app/meetings/_components/Schedule/ScheduleTable/ScheduleTableMobile.tsx (1)

22-24: schedule.item의 타입 일관성 확보 또는 타입 가드 사용 고려

코드에서 schedule.item이 문자열 또는 객체일 수 있어 타입 체크를 수행하고 있습니다. 이는 코드의 복잡성을 증가시키고 가독성을 저하시킬 수 있습니다. IReservation 인터페이스에서 item의 타입을 일관되게 정의하거나, 타입 가드 함수를 사용하여 코드의 가독성을 향상시킬 수 있습니다.

예를 들어, 타입 가드 함수를 만들어 사용할 수 있습니다:

function isItemObject(item: string | { _id: string }): item is { _id: string } {
  return typeof item !== 'string';
}

그리고 코드에서는 다음과 같이 적용합니다:

- const scheduleItemId = typeof schedule.item === "string" ? schedule.item : schedule.item._id;
+ const scheduleItemId = isItemObject(schedule.item) ? schedule.item._id : schedule.item;

apps/web/app/meetings/_components/Schedule/ScheduleTable/ScheduleTableDesktop.tsx (1)

31-35: TypeScript 타입 안정성 강화 필요

schedule.item이 문자열 또는 객체일 수 있으므로, 타입 정의를 명확히 하여 타입 안정성을 높이는 것이 좋습니다.

IReservation 인터페이스에서 item의 타입을 개선하거나, 코드 내부에서 타입 가드를 추가하여 예상치 못한 오류를 방지할 수 있습니다.

apps/web/app/meetings/_components/Schedule/ScheduleRow/index.tsx (1)

30-32: 상수 값을 컴포넌트 외부로 추출하여 재사용성 향상

'startHour', 'endHour', 'minutesPerSlot'과 같은 상수 값을 컴포넌트 외부로 추출하거나 설정 파일로 관리하면 다른 컴포넌트에서도 재사용할 수 있고, 유지보수성이 향상됩니다.

apps/web/api/reservations.ts (1)

47-50: 사용하지 않는 인터페이스 제거 필요

CreateReservationParams 인터페이스가 정의되어 있으나 코드에서 사용되지 않고 있습니다. 코드를 정리하고 유지보수성을 높이기 위해 불필요한 코드는 제거하는 것이 좋습니다.

다음의 diff를 적용하여 인터페이스를 제거할 수 있습니다:

-export interface CreateReservationParams {
-  itemId: string;
-  savedReservation: IReservation;
-}

apps/web/app/meetings/_components/Reservation/ReservationForm.tsx (4)

129-139: useEffect 의존성 배열에 setValue 추가 권장

useEffect 훅에서 setValue를 사용하고 있으므로, 의존성 배열에 setValue를 추가하는 것이 좋습니다. 이는 React 훅의 동작을 예측 가능하게 유지하고, 린트 에러를 방지하는 데 도움이 됩니다.

---

157-161: endAt 검증 로직 개선 필요

현재 newEnd가 newStart보다 이전이거나 같은 경우에 에러를 설정하고 있습니다. 하지만 이러한 검증은 validateEndAtFunction에서 처리하고 있으므로 중복된 로직이 발생할 수 있습니다. 검증 로직을 한 곳에서 관리하여 코드의 일관성과 유지 보수성을 높이는 것이 좋습니다.

---

192-201: 예약 시간 겹침 검사 로직 최적화 제안

현재 예약 시간 겹침을 검사하는 로직이 복잡하게 구성되어 있습니다. 이 로직을 별도의 유틸리티 함수로 추출하여 재사용성과 가독성을 높일 수 있습니다.

---

257-257: 삭제 버튼 표시 조건 수정 제안

현재 isEditMode가 true일 때만 DeleteButton이 표시됩니다. 하지만 수정 권한이 있는 사용자만 삭제할 수 있도록 추가적인 권한 검사가 필요할 수 있습니다.

Configuration used: CodeRabbit UI
Review profile: CHILL

Learnt from: bokeeeey
PR: codeit-internship-group-b/codeit-resources#105
File: apps/web/app/meetings/_components/Schedule/RoomName.tsx:7-15
Timestamp: 2024-11-12T09:41:43.501Z
Learning: `apps/web/app/meetings/_components/Schedule/RoomName.tsx` 파일의 `RoomName` 컴포넌트에서는 `name` prop 대신 `children`과 `ReactNode`를 사용하여 컴포넌트의 유연성을 높입니다.

#!/bin/bash
# Description: MeetingRoomSchedule 컴포넌트 파일 존재 여부 확인

# 컴포넌트 파일 검색
fd "MeetingRoomSchedule.tsx" apps/web/app/meetings/_components/

# 컴포넌트 구현 확인
ast-grep --pattern 'export default function MeetingRoomSchedule'

#!/bin/bash
# MeetingRoomSchedule 컴포넌트의 실제 구현 확인
cat apps/web/app/meetings/_components/MeetingRoomSchedule.tsx

#!/bin/bash
# Description: Verify the existence of required constants

# Check for meeting title related constants
rg "meetingTitleRequired|meetingTitlePlaceholder" "app/constants/reservationFormConstants.ts"

#!/bin/bash
# First, let's find the correct path for the constants file
fd reservationFormConstants

# Then, let's check the content of ERROR_MESSAGES and FORM_LABELS
rg "ERROR_MESSAGES|FORM_LABELS" -A 5

#!/bin/bash
# Description: Check if no-scrollbar class is defined in CSS/Tailwind files

# Search for no-scrollbar class definition
rg -t css -t scss "no-scrollbar" 
rg "no-scrollbar" -g "tailwind.config.*"

#!/bin/bash
# Search for no-scrollbar in all CSS files and global styles
fd -e css -x cat {}
fd "global.css" -x cat {}
fd "globals.css" -x cat {}

# Search in any potential style files
rg "no-scrollbar" --type-add 'styles:*.{css,scss,less,pcss,style.*}'  -t styles

#!/bin/bash
# useSidebarStore 구현 확인
rg -A 10 "export const useSidebarStore"

#!/bin/bash
# ReservationSheetContent 컴포넌트에서 cleanup 효과 확인
ast-grep --pattern 'useEffect(() => {
  return () => {
    $$$
  }
}, $$$)'

#!/bin/bash
# Search for ReservationSheetContent component implementation
rg -A 10 "ReservationSheetContent" --type tsx

#!/bin/bash
# Search for ReservationSheetContent component implementation
rg -t ts -t tsx -A 10 "ReservationSheetContent"

# Also search for any state management related code
rg -t ts -t tsx "useState.*Reservation" 

#!/bin/bash
# Search for ReservationSheetContent component implementation and state management
rg "ReservationSheetContent" -g "*.ts*" -A 10

# Look for any state management in the component
rg "useState.*Reservation" -g "*.ts*"

#!/bin/bash
# Get the full content of ReservationSheetContent
cat apps/web/app/meetings/_components/Reservation/ReservationSheetContent.tsx

#!/bin/bash
# ReservationSheetContent 컴포넌트에서 null 처리 확인
ast-grep --pattern 'selectedSchedule === null || selectedRoom === null'

# 조건부 렌더링 패턴 확인
ast-grep --pattern 'if (!selectedSchedule || !selectedRoom) {
  $$$
}'

#!/bin/bash
# Find the file and check its content
cat apps/web/app/meetings/_components/Reservation/DesktopReservationSheet.tsx

# Search for usage of selectedSchedule and selectedRoom
rg "selectedSchedule|selectedRoom" apps/web/app/meetings/_components/Reservation/DesktopReservationSheet.tsx -A 2

# Look for any conditional rendering or null checks
ast-grep --pattern 'selectedSchedule ? $$ : $$'
ast-grep --pattern 'selectedRoom ? $$ : $$'

#!/bin/bash
# Check ReservationSheetContent implementation for null handling
cat apps/web/app/meetings/_components/Reservation/ReservationSheetContent.tsx

# Search for any conditional checks in ReservationSheetContent
rg "selectedSchedule|selectedRoom" apps/web/app/meetings/_components/Reservation/ReservationSheetContent.tsx -A 2

#!/bin/bash
# Description: Schedule 타입을 사용하는 다른 컴포넌트들 확인

# Schedule 타입 사용 검색
rg -l "Schedule" --type typescript

# IReservation 타입 사용 검색
rg -l "IReservation" --type typescript

#!/bin/bash
# Description: Schedule 타입과 IReservation 타입 사용 검색

# Schedule 타입 사용 검색
rg -l "Schedule" --type ts --type tsx

# IReservation 타입 사용 검색
rg -l "IReservation" --type ts --type tsx

# Schedule 타입 정의 검색
ast-grep --pattern 'type Schedule = $_'
ast-grep --pattern 'interface Schedule $_'

# IReservation 타입 정의 검색
ast-grep --pattern 'type IReservation = $_'
ast-grep --pattern 'interface IReservation $_'

#!/bin/bash
# Description: 타입 사용 및 정의 검색

# 파일 검색
rg -l "Schedule"
rg -l "IReservation"

# 타입 사용 컨텍스트 확인
rg "Schedule.*" -A 2 -B 2
rg "IReservation.*" -A 2 -B 2

# 파일 내용 확인
fd "ScheduleItem.tsx" --exec cat {}

#!/bin/bash
# CreateReservationRequest 타입 정의 확인
ast-grep --pattern 'interface CreateReservationRequest {
  $$$
}'

#!/bin/bash
# IReservation 인터페이스 정의 확인
ast-grep --pattern 'interface IReservation {
  $$$
}'

#!/bin/bash
# Description: date-fns 버전 호환성 검증

# package-lock.json 또는 yarn.lock에서 date-fns 관련 의존성 확인
fd -e json -e lock . | xargs cat | grep -A 5 "date-fns"

# date-fns를 사용하는 파일 검색
rg -l "from ['|\"]date-fns" 

#!/bin/bash
# Check the actual usage of date-fns in the files
echo "=== timeToMinutes.ts ==="
cat apps/web/app/utils/timeToMinutes.ts

echo -e "\n=== ReservationForm.tsx ==="
cat apps/web/app/meetings/_components/Reservation/ReservationForm.tsx

echo -e "\n=== validateTime.ts ==="
cat apps/web/app/utils/validateTime.ts

#!/bin/bash
# Description: 'handleSlotClick' 함수의 시간 계산 로직을 확인합니다.

# 'handleSlotClick' 함수의 구현부 출력
rg 'const handleSlotClick' -A 15

# 'startHour' 값의 사용처 확인
rg 'startHour' -A 5

#!/bin/bash
# Check if startHour is used as a prop or if it's always hardcoded
rg -B 5 'const startHour' apps/web/app/meetings/_components/Schedule/ScheduleRow/index.tsx

# Check if there are any tests for this component
fd -e test.tsx -e spec.tsx ScheduleRow

# Check for any other time-related utility functions that might be used
rg 'timeToMinutes|formatTime|parseTime' -A 5

#!/bin/bash
# Description: 'ScheduleRow' 컴포넌트의 사용처를 검색하여 인터페이스 변경에 따른 수정이 이루어졌는지 확인합니다.

# 'ScheduleRow'를 임포트하는 모든 파일 찾기
rg 'import.*ScheduleRow' -l

# 'ScheduleRow' 컴포넌트를 렌더링하는 코드 확인
rg '<ScheduleRow' -A 5

#!/bin/bash
# Check the implementation and usage of onSlotClick in ScheduleTable components
rg 'onSlotClick' -A 5 apps/web/app/meetings/_components/Schedule/ScheduleTable/

#!/bin/bash
# Check the implementation of ScheduleRow component
cat apps/web/app/meetings/_components/Schedule/ScheduleRow/index.tsx

# Also check for any onSlotClick usage in the Schedule directory
rg 'onSlotClick' apps/web/app/meetings/_components/Schedule/

#!/bin/bash
# Description: 자기 자신의 예약이 겹침 검사에서 제외되는지 확인

# Test: 예약 ID 비교 로직 확인
rg -A 5 'if \(selectedSchedule && reservation\._id === selectedSchedule\._id\)' apps/web/app/meetings/_components/Reservation/ReservationForm.tsx

#!/bin/bash
# Get the full overlap checking function implementation
ast-grep --pattern 'function checkOverlap($_) {
  $$$
}'

# Get the full context of how selectedSchedule is used
rg -B 5 -A 10 "selectedSchedule" apps/web/app/meetings/_components/Reservation/ReservationForm.tsx

#!/bin/bash
# Get the full context of overlap checking logic
rg -B 10 -A 10 "if \(selectedSchedule && reservation\._id === selectedSchedule\._id\)" apps/web/app/meetings/_components/Reservation/ReservationForm.tsx

apps/web/app/meetings/_components/Schedule/ScheduleRow/CurrentTimeIndicator.tsx (2)

25-32: 모바일 대응이 잘 구현되었으나, 접근성 개선이 필요합니다.

현재 시간 표시기의 반응형 디자인이 잘 구현되었습니다. 하지만 스크린 리더 사용자를 위한 접근성 속성이 누락되었습니다.

다음과 같이 aria 속성을 추가하는 것을 제안드립니다:

-    <div className="relative">
+    <div className="relative" role="timer" aria-label="현재 시간 표시">
     <div
       className="border-custom-black md:h-120 absolute z-50 ml-36 h-80 border-l-2 border-solid"
       style={{ left: `${currentPosition}px` }}
+      aria-hidden="true"
     />

---

27-28: 스타일 관련 개선 제안

현재 인라인 스타일과 클래스네임을 혼용하고 있습니다. 일관성을 위해 Tailwind 클래스로 통일하는 것이 좋을 것 같습니다.

다음과 같이 수정하는 것을 제안드립니다:

-    className="border-custom-black md:h-120 absolute z-50 ml-36 h-80 border-l-2 border-solid"
-    style={{ left: `${currentPosition}px` }}
+    className={`border-custom-black md:h-120 absolute z-50 ml-36 h-80 border-l-2 border-solid left-[${currentPosition}px]`}

apps/web/app/meetings/_components/Schedule/ScheduleRow/index.tsx (2)

23-24: 상태 관리 최적화 제안

선택된 시간과 스케줄 상태를 하나의 객체로 통합하여 관리하는 것을 고려해보세요:

-const [selectedTime, setSelectedTime] = useState<string | null>(null);
-const [selectedSchedule, setSelectedSchedule] = useState<IReservation | null>(null);
+const [selection, setSelection] = useState<{
+  time: string | null;
+  schedule: IReservation | null;
+}>({ time: null, schedule: null });

---

30-34: 상수 값을 분리하여 관리하는 것을 추천드립니다.

시간 관련 설정값들을 상수로 분리하면 유지보수가 더 용이해질 것 같습니다:

+const TIME_CONSTANTS = {
+  START_HOUR: 0,
+  END_HOUR: 24,
+  MINUTES_PER_SLOT: 30,
+} as const;
+
-const startHour = 0;
-const endHour = 24;
-const minutesPerSlot = 30;
+const { START_HOUR: startHour, END_HOUR: endHour, MINUTES_PER_SLOT: minutesPerSlot } = TIME_CONSTANTS;

Configuration used: CodeRabbit UI
Review profile: CHILL